<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="表格.css"/>
    <script src="jquery-3.4.1.js"></script>
   
    <script>

        //页面加载的方法
        $(function () {
            //显示遮挡层和对话框的层
             $("#j_btnAddData").click(function () {
                 $("#j_mask").show();
                 $("#j_formAdd").show();
             });
             function closeDiv() {
                $("#j_mask").hide();
                $("#j_formAdd").hide();
            }
            //点X关闭对话框和遮挡层
             $("#j_hideFormAdd").click(function () {
                closeDiv();
            });
            //点击添加按钮创建一行加入到tbody中
            $("#j_btnAdd").click(function () {
                //获取课程和学科
                var lesson=$("#j_txtLesson").val();
                var belSch=$("#j_txtBelSch").val();
                var tt='<a href="javascrip:;" class="get">GET</a>';
                //创建一行
                $("<tr><td>"+lesson+"</td><td>"+belSch+"</td><td>"+tt+"</td></tr>").appendTo($("#j_tb"));
                $("#j_txtLesson").val("");
                closeDiv();

            });
            //点击get删除当前的行
           $(".get").click(function () {
               $(this).parent().parent().remove();
           });
            
            $("#j_tb").on("click",".get",function () {
                $(this).parent().parent().remove();
            });

        });

    </script>
</head>

<body>
    <div class="wrap">
        <div>
            <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
        </div>
        <table>
            <thead>
            <tr>
                <th>课程名称</th>
                <th>所属学院</th>
                <th>已学会</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>JavaScript</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a class="get">GET</a></td>
            </tr>
            <tr>
                <td>css</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a class="get">GET</a></td>
            </tr>
            <tr>
                <td>html</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a class="get">GET</a></td>
            </tr>
            <tr>
                <td>jQuery</td>
                <td>传智播客-前端与移动开发学院</td>
                <td><a class="get">GET</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="j_mask" class="mask"></div>
    <div id="j_formAdd" class="form-add">
        <div class="form-add-title">
            <span>添加数据</span>

            <div id="j_hideFormAdd">x</div>
        </div>
        <div class="form-item">
            <label class="lb" for="j_txtLesson">课程名称：</label>
            <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
        </div>
        <div class="form-item">
            <label class="lb" for="j_txtBelSch">所属学院：</label>
            <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
        </div>
        <div class="form-submit">
            <input type="button" value="添加" id="j_btnAdd">
        </div>
    </div>

</body>

</html>

